"use client";

import { ComboboxDemo } from "@/components/custom/combobox";
import { useSidebarStore } from "@/components/state/sidebar_state";
import { Input } from "@/components/ui/input";
import { useEffect, useState } from "react";
import { getFormattedTime } from "@/components/utils/timeUtils";
import { postData } from "@/components/utils/api";
import {
  DataItem,
  DataListProps,
  FastResponse,
} from "@/components/models/dataprops";
import { DataCard } from "@/components/comps/DataCard";
import LoadingPage from "@/components/loadingpage";
import { ServerErrorPanel } from "@/components/ServerError";
function DataList() {
  const updateSelected = useSidebarStore((state) => state.updateSelected);

  const [dataFrom, setDataFrom] = useState<string>("");
  const [dataType, setDataType] = useState<string>("");
  const [searchText, setSearchText] = useState<string>("");
  const [dataList, setDataList] = useState<DataItem[]>([]);
  const [requestError, setRequestError] = useState<boolean>(false);

  function handleDelete(id: number) {
    setDataList(dataList.filter((item) => item.id !== id));
  }

  useEffect(() => {
    async function getDataList() {
      const payload: DataListProps = {
        data_type: dataType,
        data_from: dataFrom,
        query: searchText,
        is_before: true,
        time_range: getFormattedTime(),
      };
      updateSelected("数据列表", "数据中心");

      // console.log(payload);
      try {
        const result = await postData<FastResponse<DataItem[]>, DataListProps>(
          "/data/list",
          payload
        ); // 泛型定义请求和响应类型
        setDataList(result.data);
        setRequestError(false);
      } catch (error) {
        console.log("Error submitting data:", error);
        setRequestError(true);
      }
    }
    getDataList();
  }, [dataFrom, dataType, searchText, updateSelected]);

  const data_types = [
    {
      label: "静态数据",
      value: "静态数据",
    },
    {
      label: "调优数据",
      value: "调优数据",
    },
  ];

  const data_froms = [
    {
      label: "开源数据",
      value: "开源数据",
    },
    {
      label: "自建数据",
      value: "自建数据",
    },
  ];

  return (
    <div>
      <div className="flex flex-flow space-x-4 items-center justify-between">
        <div className="flex flex-flow space-x-4 items-center">
          <ComboboxDemo
            items={data_types}
            placehoder="所有类型"
            onChange={setDataType}
          />
          <ComboboxDemo
            items={data_froms}
            placehoder="全部来源"
            onChange={setDataFrom}
          />
        </div>

        <Input
          className="w-[250px]"
          type="email"
          placeholder="模糊搜索"
          // value={searchText}
          // onChange={(e) => setSearchText((e.target as HTMLInputElement).value)}
          onKeyDown={(e) => {
            setSearchText((e.target as HTMLInputElement).value);
          }}
        />
      </div>
      <div
        className={`flex pt-4 min-h-[500px] ${
          dataList.length === 0 ? "items-center justify-center" : ""
        }`}
      >
        <div className="flex flex-wrap gap-3">
          {dataList.length > 0 ? (
            dataList.map((item) => (
              <DataCard
                key={item.id}
                data={item}
                onDelete={() => {
                  handleDelete(item.id);
                }}
              />
            ))
          ) : requestError ? (
            <ServerErrorPanel />
          ) : (
            <LoadingPage />
          )}
        </div>
      </div>
    </div>
  );
}

export default DataList;
